<template>
  <div style="display:flex">

        <el-tree
          class="filter-tree"
          node-key="id"
          highlight-current
          :data="treeData"
          :default-expanded-keys="aExpandedKeys"
          :filter-node-method="filterNode"
          :props="defaultProps"
          @node-click="getNodeData"
          @node-expand="nodeExpand"
          @node-collapse="nodeCollapse"
        >
        </el-tree>
      </el-col>
  <avue-crud :data="data" :option="option"></avue-crud>
  </div>
</template>

<script>
   export default {
    data() {
      return {
        obj:{},
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }, {
            name:'王五',
            sex:'女'
          }, {
            name:'赵六',
            sex:'男'
          }
        ],
        option:{
          page:false,
          align:'center',
          menuAlign:'center',
          column:[
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        },
        treeData:[
          {
            id:0,
            label:'一级部门',
            value:0,
            children:[
              {
                id:1,
                label:'一级部门1',
                value:0,
              },{
                id:2,
                label:'一级部门2',
                value:0,
              }
            ]
          },{
            id:3,
            label:'二级部门',
            value:0,
            children:[
              {
                id:4,
                label:'二级部门1',
                value:0,
              },{
                id:5,
                label:'二级部门2',
                value:0,
              }
            ]
          }
        ],
        treeOption:{
          nodeKey:'id',
          props:{
            labelText:'标题',
            label:'label',
            value:'value',
            children:'children'
          }
        }
      }
    },
    methods: {
      nodeClick(data){
        this.$message.success('点击回调')
      }
    }
  }
</script>

